<template>
 <div>
   <el-card style="margin-left:15px;margin-bottom: 15px;margin-right: 10px ">
     <el-breadcrumb
       separator-class="el-icon-arrow-left"
       style="margin-right: 30px;position:absolute;right:0;ub:main-center cross-center"
     >
       <el-breadcrumb-item :to="{ path: '/' }">分配送货任务</el-breadcrumb-item>
       <el-breadcrumb-item>配送管理</el-breadcrumb-item>
       <el-breadcrumb-item>调度中心</el-breadcrumb-item>
     </el-breadcrumb>
<!-- 搜索框-->
     <div style="margin-top: 15px;margin-left: 15px;height: 40px;width:550px" >
       <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
         <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 150px">
           <el-option label="任务单id" value="任务单id"></el-option>
           <el-option label="任务单状态" value="任务单状态"></el-option>
<!--           <el-option label="订单id" value="订单id"></el-option>-->

<!--           <el-option label="订购货物信息" value="2"></el-option>-->
<!--           <el-option label="收购客户信息" value="3"></el-option>-->
<!--           <el-option label="订购客户信息" value="4"></el-option>-->
<!--           <el-option label="备注信息" value="6"></el-option>-->
         </el-select>
         <el-button slot="append" icon="el-icon-search" @click="query_Click"></el-button>
       </el-input>
     </div>

<!--数据表-->
     <div style="margin-top: 15px;margin-left: 15px;margin-right: 20px;width:100%;">
       <template>
         <el-table
           :data="tableData.slice((pageInfo.curPage-1)*pageInfo.pageSize,
        pageInfo.curPage*pageInfo.pageSize)"
           style="width: 100%"
           height="450">
           <el-table-column
             fixed
             prop="id"
             label="任务单id"
             width="92px">
           </el-table-column>

           <el-table-column
             prop="orderStatus"
             label="订单状态"
             width="92px">
             <template slot-scope="scope">
               <span v-if="scope.row.orderStatus===0">可分配</span>
               <span v-if="scope.row.orderStatus===1">缺货</span>
               <span v-if="scope.row.orderStatus===2">调度中</span>
               <span v-if="scope.row.orderStatus===3">已领货</span>
               <span v-if="scope.row.orderStatus===4">配送完成</span>
               <span v-if="scope.row.orderStatus===5">已退货</span>
             </template>
           </el-table-column>

           <el-table-column
             prop="orderId"
             label="订单id"
             width="92px">
           </el-table-column>

           <el-table-column
             prop="userId"
             label="配送员"
             width="92px">
           </el-table-column>
           <el-table-column
             prop="serviceMoney"
             label="服务费"
             width="92px">
           </el-table-column>
           <el-table-column
             prop="clientId"
             label="客户id"
             width="92px">
           </el-table-column>

           <el-table-column
             prop="customerSatisfaction"
             label="客户满意度"
             width="92px">
           </el-table-column>

           <el-table-column
             prop="taskType"
             label="任务类型"
             width="92px">
<!--             <template slot-scope="scope">-->
<!--               <span v-if="scope.row.orderType===0">普通配送订单</span>-->
<!--               <span v-if="scope.row.orderType===1">退订单</span>-->
<!--               <span v-if="scope.row.orderType===2">换货单</span>-->
<!--               <span v-if="scope.row.orderType===3">退货单</span>-->
<!--             </template>-->
           </el-table-column>

           <el-table-column
             prop="taskStatus"
             label="任务状态"
             width="92px">
           </el-table-column>

           <el-table-column
             prop="clientFeedback"
             label="客户反馈"
             width="92px">
           </el-table-column>

           <el-table-column
             prop="servicetimeInformation"
             label="服务时间信息"
             width="92px">
           </el-table-column>

           <el-table-column
             prop="remark"
             label="备注信息"
             width="92px">
           </el-table-column>

           <el-table-column
             prop="createTime"
             label="创建时间"
             width="92px">
           </el-table-column>

           <el-table-column
             prop="updateTime"
             label="更新时间"
             width="92px">
           </el-table-column>


           <el-table-column
             fixed="right"
             label="操作"
             width="92px">
             <template slot-scope="scope">
               <el-button type="primary" round @click="getDialogTable(scope.row)" :disabled="scope.row.orderStatus!==0">送货</el-button>
             </template>
           </el-table-column>

         </el-table>
       </template>
     </div>

<!--     分页-->
     <div class="block" style="margin-top: 10px;margin-left: 15px;">
       <!--    <span class="demonstration">完整功能</span>-->
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="pageInfo.curPage"
         :page-sizes="[4,8,10,20]"
         :page-size="pageInfo.pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total"
         background
       >
       </el-pagination>
     </div>

<!--   对话框添加送货人员-->
     <div>
       <el-dialog title="分配送货任务" :visible.sync="dialogTableVisible" width="30%">
           <el-table :data="gridData">
             <el-table-column property="id" label="id" width="100" fixed></el-table-column>
             <el-table-column property="username" label="登录名" width="100"></el-table-column>
             <el-table-column property="name" label="姓名" width="100"></el-table-column>
             <el-table-column
               label="操作"
               width="100"
               fixed="right" >
               <template slot-scope="scope">
                 <el-button type="primary" round @click="makeSendUser(scope.row)">确定</el-button>
               </template>
             </el-table-column>
           </el-table>
         </el-dialog>
     </div>
   </el-card>
 </div>

</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        pageInfo:{
          curPage:1,
          pageSize:4,
        },
        total:0,

        input: '',
        select: '',
        queryInfo: {
          createTime:'',
          finishTime:'',
          queryContain:'',
          queryType:''
        },

        dialogTableVisible: false ,
        formLabelWidth: '120px',
        gridData:[],

        editForm:{
          userId:'',
          orderId:'',
          serviceMoney:'',
          remark:''
        },

        judge_orderStatus:'',
        judge_orderId:''
      }
    },
    methods:{
      async getAllOrder()
      {
          console.log('获得任务单数据：')
          let url='/api/dispatching_management/query_all_missionList'
          const {data:res}=await this.$http.get(url).catch(err=>{
            console.log(err.msg)
            this.$message.error('服务器没有权限，请多试几遍！')
          })
          if (res.code==200)
          {
            // this.$message.success(res.msg)
            console.log(res.msg)
            console.log(res.data)
            this.tableData=res.data
            this.total=res.data.length
          }
          else if (res.code!=200)
          {
            this.$message.error(res.error())
          }
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageInfo.pageSize=val
      },
      handleCurrentChange(val) {
        this.pageInfo.curPage=val
        console.log(`当前页: ${val}`);
      },
      async query_Click() {
        console.log('查询');
        console.log('this.input:'+this.input);
        console.log('this.select:'+this.select);
        if(this.input=='')
        {
          return this.$message.error('请输入相关查询数据内容')
        }
        if(this.select=='')
        {
          return this.$message.error('请选择查询类型')
        }
        else if((this.select!==''||this.select!==null)&&(this.input!==''||this.input!==null))
        {
          switch (this.select)
          {
            case "任务单id":
              //执行查询id的代码块
              this.query_orderId()
              break;
            case "任务单状态":
              this.query_orderType()
              break;
            // case "任务单id":
            //     this.query_id()
            //   break;
            // case "订单状态":
            //   this.query_orderType()
            //   break;
            // case "客户姓名":
            //   this.query_orderType()
            //   break;
            // case "联系电话":
            //   this.query_orderType()
            //   break;
            default:
              break;

          }
        }

      },
      //根据订单id查询
      async query_id(){
        // let url="/api/dispatching_management/queryDispat_by_id/"
        const{data:res}=await this.$http.get(`/api/dispatching_management/queryDispat_by_id/${this.input}`).catch(err=>{
          this.$message.error('对不起，服务器异常或没有权限！请多试几次')
          console.log(err.message)
        })
        if(res.code==200)
        {
          this.$message.success(res.msg)
          console.log(res.msg)
          console.log(res.data)
          this.tableData=res.data
        }
        else if(res.code!==200)
        {
          this.$message.error(res.msg)
        }
      },
      //根据任务单id查询
      async query_orderId(){
        // let url="/api/dispatching_management/queryDispat_by_id/"
        let url='/api/dispatching_management/query_mission_by_id/'
        console.log('根据id查询');
        const{data:res}=await this.$http.get(`${url}/${this.input}`).catch(err=>{
          this.$message.error('对不起，服务器异常或没有权限！请多试几次')
          console.log(err.message)
        })
        if(res.code==200)
        {
          this.$message.success(res.msg)
          console.log(res.data)
          this.tableData=res.data
        }
        else if(res.code!==200)
        {
          this.$message.error(res.msg)
        }
      },
      //根据任务单类型()
      async query_orderType()
      {
        console.log('任务单类型：')
        let url='/api/dispatching_management/query_missionList/'
        const {data:res}=await this.$http.get(`${url}${this.input}`).catch(err=>{
          console.log(err.msg)
          this.$message.error('对不起，服务器异常或没有权限！请多试几次')
        })
        if(res.code==200)
        {
          this.$message.success(res.msg)
          this.tableData=res.data
        }
        else if (res.code!=200)
        {
          this.$message.error(res.msg)
        }
        // let url='/api/dispatching_management/query_order_on_require'
        //
        // this.queryInfo.queryContain=this.input
        // this.queryInfo.queryType=this.select
        //
        // const{data:res}=await this.$http.post(url,this.queryInfo).catch(err=>{
        //   this.$message.error("对不起，服务器异常或没有权限！请多试几次！")
        //   console.log(err.msg)
        // })
        //
        // if(res.code==200)
        // {
        //   console.log('查询结果')
        //   this.$message.success(res.msg)
        //   console.log(res.data)
        //   this.tableData=res.data
        // }
        // else if(res.code!=200)
        // {
        //   // this.$message.error(res.msg+'更新错误')
        //   this.$message.error('更新错误')
        //
        // }
      },
      //获得数据送货人员并初始化对话框里面的属性
      async getDeliveryPersonnel()
      {
        let url='/api/dispatching_management/getSenderList'
        const{data:res}=await this.$http.get(url).catch(err=>{
          this.$message.error('对不起，服务器异常或没有权限！请多试几次')
          console.log(err.message)
        })
        if(res.code==200)
        {
          // console.log('送货人员：');
          // console.log(res.data)
          this.gridData=res.data
        }
        else if(res!=200)
        {
          console.log('获取送货人员失败')
          console.log(res.msg)
        }

      },
      async getDialogTable(row)
      {
        console.log(row.orderId)
        console.log(row.orderStatus)
        //判断订单任务是否符合分配送货员的操作
        // this.get_orderStatus(row.orderId)
        this.editForm.orderId=row.orderId
        this.editForm.remark=row.remark
        this.editForm.serviceMoney=row.serviceMoney
        console.log(row);
        this.dialogTableVisible=true
      },
      //确定送货人员
      async makeSendUser(row)
      {
        // 可分配(0)、缺货（1）、
        // 调度中（2）、已领货（3）、
        // 配送完成（4）、已退货（5），
        // 默认为可分配（0）
        // console.log('确定送货人员');
        console.log(row)
        //生成签收单--->新的任务单
        let url='/api/dispatching_management/generatorMissionList/'
        const{data:res}=await this.$http.get(
          `${url}${row.id}/${this.editForm.orderId}/${this.editForm.serviceMoney}/${this.editForm.remark}`
        ).catch(
          err=>{console.log(err.msg)
            this.$message.error('服务器没有权限，请多试几次！！！')
          })
        if (res.code==200)
        {
          console.log('确定送货人员结果');
          console.log(res.msg)
          this.$message.success('分配送货人员成功!')
          // this.$message.success(res.msg)
          //执行完之后利用id和orderStatus 更新
          ///api/dispatching_management/updateOrder/30/2
          this.updateOrder(this.editForm.orderId,2)
          //执行数据之后再次获取数据重新渲染数据
          this.getAllOrder()
        }
        else if(res.code!==200)
        {
          // this.$message.error(res.msg)
          console.log(res.msg)
          this.$message.error('分配送货人员失败!')
          // this.dialogTableVisible=false
        }
        this.dialogTableVisible=false
      },
      async updateOrder(orderId,orderStatus)
      {
        let url = '/api/dispatching_management/updateOrder/'
        const {data:res}=await this.$http.get(`${url}${orderId}/${orderStatus}`).catch(
          err=>{
            this.$message.error('数据更新失败，服务器更新失败')
            console.log(err.msg)
          }
        )
        if (res.code==200)
        {
          console.log('数据更新成功')
          // this.$message.success(res.msg)
          console.log(res.msg)
        }
        else if (res.code!==200)
        {
          console.log('数据更新失败')
          // this.$message.error(res.msg)
        }
      },

      //获取订单状态
      // async get_orderStatus(orderId)
      // {
      //   console.log(orderId)
      //   //根据订单id查询到订单status
      //   let url_queryStatus='/api/dispatching_management/query_order_by_id/'
      //   const {data:res}=await this.$http.get(`${url_queryStatus}${orderId}`)
      //   if(res.code==200)
      //   {
      //     console.log(res.data)
      //     console.log(res.data.orderStatus);
      //     this.judge_orderStatus=res.data.orderStatus
      //   }
      //   else if (res.code!==200)
      //   {
      //     console.log('获取订单状态失败');
      //   }
      // },

    },
    created() {
      this.getAllOrder()
      this.getDeliveryPersonnel()
      // this.getSendUser()
    }

  };
</script>

<style scoped>
  .el-select .el-input {
    width: 80px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
